<!--
 描述: 中下
-->

<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">农民人均年纯收入排行榜</div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="chartsdom" id="chart_ptrend_cun"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "colorfulRadarcun",
        data() {
            return {
                baseUrl: domain.testUrl,
                option: null,
                dataMap: {},
            }
        },
        mounted() {
            this.getEchart();
        },
        methods: {
            getEchart() {

                var url = this.baseUrl + "memberDatav/selectStateByCondition";

                axios.post(url).then((response) => {

                    let myChart = echarts.init(document.getElementById('chart_ptrend_cun'));
// xdata
                    let xData = ['沾尚镇', '西寨乡', '乐平镇', '大寨镇', '三都乡', '赵壁乡', '冶头镇', '孔氏乡', '闫庄乡', '皋落镇', '界都乡']
// ydata
                    let yData = [2900, 2700, 2500, 2300, 2100, 1900, 1700, 1500, 1300, 1100, 899]
// pictorialData
                    let pictorialData = []
                    yData.map(v => {
                        pictorialData.push({value: v, symbolPosition: 'end'})
                    })


                    this.option = {
                        tooltip: {
                            // trigger: 'axis',
                            // axisPointer: {
                            //     type: 'shadow',
                            // }
                        },
                        grid: {
                            top: '17%',
                            left: '4%',
                            right: '4%',
                            bottom: '6%',
                            containLabel: true
                        },
                        xAxis: [{
                            type: 'category',
                            data: xData,
                            axisTick: {alignWithLabel: true},
                            axisLabel: {rotate: 20, textStyle: {fontSize: '90%', color: "#fff"}},
                            axisLine: {show: false},
                            axisTick: false
                        }],
                        yAxis: [{
                            type: 'value',
                            name: '单位',
                            nameTextStyle: {color: '#fff', fontSize: '90%', padding: [0, 0, 0, -45]},
                            splitLine: {lineStyle: {color: 'rgba(255,255,255, .1)'}},
                            axisLabel: {textStyle: {fontSize: '90%', color: "#fff"}},
                            axisLine: {show: false},
                            axisTick: false
                        }],
                        series: [{
                            type: 'pictorialBar',
                            symbol: 'rect',
                            symbolSize: [30, 3],
                            symbolOffset: [0, 0],
                            itemStyle: {
                                color: '#4afefc',
                            },
                            tooltip: {show: false},
                            data: pictorialData
                        }, {
                            type: 'bar',
                            barWidth: 30,
                            data: yData,
                            itemStyle: {
                                color: params => {
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(74,254,252,.6)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(74,254,252,0)'
                                    }])
                                }
                            },

                        }]
                    };

                    myChart.setOption(this.option, true);

                    window.addEventListener('resize', () => {
                        myChart.resize();
                    });


                }).catch(function (response) {
                    console.log(response); //发生错误时执行的代码
                });

            }
        },
        beforeDestroy() {
        }
    };
</script>

<style lang="scss" scoped>
    .sn-container {
        left: 530px;
        top: 832px;
        width: 857px;
        height: 220px;
        .chartsdom {
            width: 100%;
            height: 100%;
        }
    }
</style>
